<!DOCTYPE html>
<html lang="en">
<head>
    <title>动态发布系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="icon" href="image/icon/favicon.ico">
    <style>
        .picCon{
            overflow: hidden;       /*防止div被图片撑大*/
        }
    </style>
</head>
<body>
<div class="container" style="width: 100%">
    <div class="row clearfix">
        <div class="col-sm-12 column">
            <ul class="nav nav-tabs">
                <li>
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <a href="./find.html">朋友圈</a>
                </li>
                <li>
                    <a href="./message.html" id="nrmes">消息</a>
                </li>
                <li >
                    <a href="./square.html" >广场</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container" style="min-height: 325px;background-color: #F5F5F5">
    <div class="row clearfix" >
        <div class="col-sm-3 column">
            <div class="row clearfix">
                <div class="col-sm-12 column" style="background-color: #FFFFFF;border-radius: 10px;width: 96%;margin: 2%">
                    <div class="row clearfix"  align="left">
                        <div class="col-xs-5 column;" style="height: 100px;">
                            <div style="height: 20px;"></div>
                            <img id="headphoto" style="width: 60px;height: 60px;border-radius: 30px">
                        </div>
                        <div class="col-xs-7 column" align="left">
                            <div style="height: 25px;"></div>
                            <label style="font-size: 20px"  id="username"></label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 column"  style="background-color: #FFFFFF;border-radius: 10px;width: 96%;margin: 2%" align="center" >
                    <div >
                        <div  class="row clearfix" align="center">
                            <div onclick="fans(0)" class="col-xs-6 column">
                                <label  style="cursor: pointer;">关注了</label><br>
                                <label style="cursor: pointer" id="focuto">?</label>
                            </div>
                            <div onclick="fans(1)" class="col-xs-6 column">
                                <label style="cursor: pointer;">粉丝数</label><br>
                                <label style="cursor: pointer;" id="focus">?</label>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-xs-6 column">
                                <button onclick="guanzhu()" id="isfocus" style="background-color: #FFF3ED;" type="button" class="btn btn-default"><em class="glyphicon glyphicon-ok"></em>&nbsp; 未关注</button>
                            </div>
                            <div onclick="pinbi()" class="col-xs-6 column">
                                <button id="isblack" style="background-color: #cbc9c7;" type="button" class="btn btn-default"><em class="glyphicon glyphicon-remove"></em>&nbsp; 未屏蔽</button>
                            </div>
                        </div>
                        <div style="height: 20px"></div>
                        <label style="font-size: 25px">个人简介</label>
                        <div style="padding-top: 10px">
                            <label id="introduction" style="font-size: 16px"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 column" style="background-color: #F5F5F5">
            <div id="dynamic" style="visibility: hidden" class="row clearfix">

            </div>
            <div>
                <ul id="page" class="pagination">
                </ul>
            </div>
        </div>
    </div>

</div>
<!-- pModal -->
<div class="modal fade" id="pModal" tabihndex="-1" role="dialog" aria-labelledby="pModalLabel">
    <div  class="modal-dialog" role="document">
        <div align="center" style="border-radius: 15px;" class="modal-content" data-dismiss="modal">
            <img id="modelimg" src="image/hg.jpg" style="max-width: 100%;border-radius: 15px;">
        </div>
    </div>
</div>
</body>
<script>
    function modalimg(val){
        $('#modelimg').attr('src',val)
        $('#pModal').modal('show')
    }
    function bb(){
        var height=0;
        $("div[name='divpic']").each(
            function(){
                if(height==0)
                    height=parseInt($(this).width()*0.8);
                $(this).height(height)
            })
        $("input[name='pic']").each(
            function(){
                var w=$(this).width();
                var h=$(this).height()
                if(h>w*0.8)
                {
                    $(this).width('100%')
                }
                else $(this).height('100%')
            })
        document.getElementById("dynamic").style.visibility= "visible"
    }
    function bian(){
        setTimeout("bb()",300)
    }
    window.onresize = function(){
        bian()
    }
    var vid;
    var qian="/moments"
    var page=0;
    var totalpage;
    function guanzhu(){
        $.ajax({
            url:qian+ "/focu/guanzhu",
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            type: "put",
            data: {
                vid: vid
            },
            dataType: "json",
            success: function (data) {
                if(data.code==200){
                    var arr=data.obj;
                    if(arr[0]==1&&arr[1]==1)
                        $('#isfocus').html("<em class=\"glyphicon glyphicon-ok\"></em>&nbsp; 已关注")
                    else if(arr[0]==1&&arr[1]==0)
                        $('#isfocus').html("<em class=\"glyphicon glyphicon-plus\"></em>&nbsp; 加关注")
                    else if(arr[0]==0&&arr[1]==1)
                        $('#isfocus').html("<em class=\"glyphicon glyphicon-ok\"></em>&nbsp; 已关注")
                    else if(arr[0]==0&&arr[1]==0)
                        $('#isfocus').html("<em class=\"glyphicon glyphicon-plus\"></em>&nbsp; 加关注")
                }
            }
        })
    }
    function pinbi(){
        $.ajax({
            url: qian+"/focu/pinbi",
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            type:"put",
            data: {
                vid: vid
            },
            dataType: "json",
            success: function (data) {
                if(data.code==200){
                    if(data.obj)
                    {
                        $('#isblack').html("<em class=\"glyphicon glyphicon-ok\"></em>&nbsp; 已屏蔽")
                    }
                    else {
                        $('#isblack').html("<em class=\"glyphicon glyphicon-remove\"></em>&nbsp; 未屏蔽")
                    }
                }
            }
        })
    }
    function fans(type){
        if(type==1)window.location.href="./fans.html?id="+vid;
        else window.location.href="./focuto.html?id="+vid;
    }
    function gettotal(){
        $.ajax({
            url: qian+"/visitor/gettotal",
            data: {
              vid :vid,
            },
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            success: function (data) {
                var total=data.obj;
                totalpage=parseInt(total/5)+(total%5===0?0:1);
                var html="                    <li onclick='fanye("+(-1)+")'>\n" +
                    "                        <a href=\"#\">Prev</a>\n" +
                    "                    </li>"
                for(var i=1;i<=totalpage;i++)
                {
                    html+="                    <li onclick='fanye("+(i-1)+")'>\n" +
                        "                       <a href=\"#\"> "+i+"</a>\n" +
                        "                    </li>"
                }
                html+="                    <li onclick='fanye("+(-2)+")'>\n" +
                    "                        <a href=\"#\">Next</a>\n" +
                    "                    </li>"
                $('#page').html(html)
            }
        })
    }
    function fanye(val){
        if(val>=0){
            page=val;
        }
        else if(val===-1)
        {
            page--;
            page=Math.max(0,page);
        }
        else {
            page++;
            page=Math.min(page=Math.min(page,totalpage-1))
        }
        getdynamic(page)
    }
    $(function () {
        vid=(document.location.href.toString().split("?")[1].split('=')[1]);
        if(vid==localStorage.getItem('id'))window.location.href="./index.html"
        $.ajax({
            url:qian+"/loginInfo",
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            success:function (data){
                if(data.code==200)
                {
                    var user=data.obj
                    if(user.nrmes!=0)
                    {
                        $("#nrmes").html("<span class=\"badge pull-right\">"+user.nrmes+"</span>消息")
                    }
                    getvisitor(vid,localStorage.getItem('id'));
                    var visit=JSON.parse(localStorage.getItem('visitor'))
                    $("#username").html(visit.realname)
                    if(!visit.myisblacklist)
                    {
                        $("#focuto").html(visit.focuto)
                        $("#focus").html(visit.focus)
                        gettotal();
                        getdynamic(0)
                    }
                    if(visit.isfocus)
                    {
                        $('#isfocus').html("<em class=\"glyphicon glyphicon-ok\"></em>&nbsp; 已关注")

                    }
                    else{
                        $('#isfocus').html("<em class=\"glyphicon glyphicon-plus\"></em>&nbsp; 加关注")
                    }
                    if(visit.ismyblacklist)
                    {
                        $('#isblack').html("<em class=\"glyphicon glyphicon-ok\"></em>&nbsp; 已屏蔽")
                    }
                    else{
                        $('#isblack').html("<em class=\"glyphicon glyphicon-remove\"></em>&nbsp; 未屏蔽")
                    }
                    $("#introduction").html(visit.introduction)
                    $("#headphoto").attr('src',visit.headphoto);
                }
                else window.location.href="./login.html"
            },
            error:function (data){
                window.location.href="./login.html"
            }
        })
    })
    function getvisitor(vid,id){
        $.ajax({
            url:qian+"/visitor/getInfo",
            data: {
                'vid':vid,
                'id':id
            },
            async:false,
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            success:function (data){
                if(data.code==200)
                {
                    localStorage.setItem('visitor',JSON.stringify(data.obj))
                }
                else window.location.href="./login.html"
            }
        })
    }
    function getdynamic(page){
        document.getElementById("dynamic").style.visibility= "hidden"
        var visit=JSON.parse(localStorage.getItem('visitor'))
        $.ajax({
            url:qian+"/visitor/getdynamic",
            data:{
                'vid': visit.id,
                'page': page
            },
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            dataType: "json",
            success:function (data){
                if(data.code==200)
                {
                    var html="";
                    if(data.obj.length==0)
                    {
                        $("#page").html("")
                    }
                    for(var j=0;j<data.obj.length;j++) {
                        if (data.obj.length <= j) {
                            $("#dynamic" + j).html("")
                            continue;
                        }
                        html+="\n" +
                            "            <div class=\"col-md-12 column\" id=\"dynamic"+j+"\"  style='background-color: #FFFFFF;border-radius: 10px;;width: 98.6%;margin: 0.7%' >\n" +
                            "                            <div  id=\"iszhuan"+j+"\" style=\"padding: 10px\">\n" +
                            "                                <em class=\"glyphicon glyphicon-share-alt\"></em>&nbsp;<a href=\"#\"> @小帅啦</a>\n" +
                            "                            </div>\n" +
                            "                            <p id=\"text"+j+"\"></p>\n" +
                            "                            <div style='width: 60%' id=\"image"+j+"\"></div>\n" +
                            "                            <div class=\"btn-group\" style=\"width: 100%\">\n" +
                            "                            <p><a class=\"btn\" href=\"./details.html?dyid="+data.obj[j].id+"\">View details »</a><label id=\"time"+j+"\" style=\"color: darkgray;font-size: 10px\"> 2021-2-8</label></p>\n" +
                            "                            <div class=\"btn-group\" style=\"width: 100%\">\n" +
                            "                                <button id=\"zanbtn"+j+"\" style=\"width: 50%\" onclick='dianzan(this.value,"+data.obj[j].userid+",\""+data.obj[j].title+"\","+j+")' class=\"btn btn-default\" type=\"button\"><em class=\"glyphicon glyphicon-heart\">&nbsp</em><span id=\"zan"+j+"\" ></span></button>\n" +
                            "                                <button id=\"zhuanbtn"+j+"\" style=\"width: 50%\" onclick='zhuanfa(this.value)' class=\"btn btn-default\" type=\"button\"><em class=\"glyphicon glyphicon-share-alt\">&nbsp</em><span id=\"zhuan"+j+"\" ></span></button>\n" +
                            "                            </div>\n" +
                            "            </div>"
                    }
                    $("#dynamic").html(html)
                    for(var j=0;j<data.obj.length;j++)
                    {
                        if(data.obj.length<=j)
                        {
                            $("#dynamic"+j).html("")
                            continue;
                        }
                        var obj=data.obj[j];
                        $("#"+"text"+j).html(obj.text);
                        $("#"+"zan"+j).html(obj.zan);
                        $("#"+"zanbtn"+j).val(obj.id);
                        $("#"+"zhuan"+j).html(obj.zhuan);
                        $("#"+"zhuanbtn"+j).val(obj.dyid);
                        $("#"+"time"+j).html(obj.time);
                        if(obj.iszan)
                        {
                            $("#"+"zanbtn"+j).css("color","#FF8200");
                        }
                        if(obj.image!="")
                        {
                            var images=obj.image.split(",");
                            var html="<div align='left'  >"
                            for(var i=0;i<images.length;i++)
                            {
                                html+="<div  onclick='modalimg(\""+images[i]+"\")' name='divpic' style='width: 33%;float: left;border-radius: 10px;'  class='picCon '><input type='image' name='pic' style=\"margin: 1px;\" src=\""+images[i]+"\"></div>"
                            }
                            html+= "</div>\n";
                            $("#"+"image"+j).html(html);
                        }

                        var html="";
                        if(obj.iszhuan)
                        {
                            html+="<em class=\"glyphicon glyphicon-share-alt\"></em>&nbsp;<a onclick='visitor("+obj.dyuserid+")'>@"+obj.realname+"</a>"
                        }
                        $("#"+"iszhuan"+j).html(html);
                        bian()
                    }
                }
                else window.location.href="./login.html"
            }
        })
    }
    function dianzan(dyid,userid,dyname,j){
        $.ajax({
            url:qian+"/zan/dianzan",
            data:{
                'dyid': dyid,
                'userid': userid,
                'dyname': dyname,
            },
            type: "put",
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            success:function (data){
                if(data.code==200)
                {
                    if(data.obj)
                    {
                        $("#"+"zanbtn"+j).css("color","#FF8200");
                        $("#"+"zan"+j).html(parseInt($("#"+"zan"+j).html())+1);
                    }
                    else {
                        $("#"+"zanbtn"+j).css("color","#333333");
                        $("#"+"zan"+j).html(parseInt($("#"+"zan"+j).html())-1);
                    }
                }
            }
        })
    }
    function zhuanfa(dyid){
        $.ajax({
            url:qian+"/zan/zhuanfa",
            data:{
                'dyid': dyid,
            },
            type: "post",
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            success:function (data){
                if(data.code==200)
                {
                    window.location.reload()
                }
            }
        })
    }
    function visitor(vid){
        if(vid==localStorage.getItem('id'))window.location.href="./index.html";
        localStorage.setItem('vid',vid);
        window.location.href="./visitor.html";
    }
</script>
</html>